<template>
  <div>
    <el-menu
      :default-active="currentpath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgba(236, 236, 235, 0.3)"
      text-color="#000"
      active-text-color="#ffd04b"
      router
      :unique-opened="true"
      v-if="userinfo"
    >
      <template v-for="(menu,i) in menus">
        <template v-if="userinfo.roleid>=menu.premession">
          <el-menu-item :key="i" v-if="!menu.children " :index="menu.path">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.text}}</span>
          </el-menu-item>

          <el-submenu v-else :key="i" :index="menu.path">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{menu.text}}</span>
            </template>

            <template v-for="(child,k) in menu.children">
              <el-menu-item v-if="!child.hide" :key="k" :index="child.path">
                <i :class="child.icon"></i>
                <span slot="title">{{child.text}}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
      </template>
    </el-menu>
  </div>
</template>


<script>
import { menus } from "@/utils/menus";
export default {
  props:['userinfo'],
  data() {
    return {
      isCollapse: true,
      menus,
      currentpath: this.$route.path,
    };
  },
  watch: {
    //  监听每次切换的高亮
    $route: function (to, from) {
      this.currentpath = to.path;
    },
  },
  methods: {
    handleOpen() {},
    handleClose() {},
  },
  mounted(){
   
  }
};
</script>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 199px;
  min-height: 400px;
  background: rgba(236, 236, 235, 0.1);
}
.el-menu-vertical-demo el-menu {
  background: rgba(236, 236, 235, 0.1);
}
</style>